<template>

  <div >

    <div> this is a test</div>




    <button @click="message_1"> click me message1 </button>
    <el-divider></el-divider>
    <button @click="message_2"> click me message2</button>
    <transition name="el-zoom-in-center">
      <login-form v-show="login_form_view"></login-form>
    </transition>
    <el-divider></el-divider>
    <div>{{rootMess}}</div>
    <button @click="getRoot"> getRoot </button>


    <el-divider></el-divider>
    <h1>{{token}}</h1>
    <h1>{{deToken}}</h1>
    <button @click="getToken"> getToken</button>
    <el-divider></el-divider>

    <button @click="loginOut"> loginOut </button>


    <el-divider></el-divider>
    <h1>{{result_info}}</h1>
    <button @click="getUserById"> getUserById</button>

    <el-divider></el-divider>
    <button id="TencentCaptcha" data-appid="2066897222" data-cbfn="callbackName"
            type="button" @click="varify">腾讯防水墙</button>


    <MP3Player></MP3Player>
  </div>



</template>

<script>
import popMessage from "@/utils/popMessage";
import loginForm from "@/components/login"
import jwtDecode from "jwt-decode";

import request from "@/utils/request";
import Vue from "vue";
import {adminRoutes} from "@/router";
import userManagerApi from "@/views/api/userManager";
import MP3Player from "@/views2/MP3/index"







export default {
  name: "test",
  components:{
      loginForm,
      MP3Player
  },

  data()
  {
    return{
      login_form_view:false,
      token:'',
      deToken:'',
      result_info:'',
      rootMess:''
    }
  },

  mounted() {
      },
  methods:{
    message_1()
    {
      popMessage(true,"this is a test","error");
    },
    message_2()
    {


      this.login_form_view=(this.login_form_view===true)?false:true;
      popMessage(true,"this is a test","alert");

    },
    getRoot()
    {
/*      const  emiter = new Vue()
      emiter.$bus.$emit("changeRoutes",adminRoutes)*/
      // this.$router.addRoutes(adminRoutes)
      userManagerApi.getAllDepartMent(null,{name:"学院"}).then(res=>
      {
        this.rootMess=res
      }).catch(error=>
      {
        this.rootMess=error;
      })
    },
    getToken()
    {
      this.token=this.$store.getters.token
      this.deToken=jwtDecode(this.$store.getters.token);
    },
    loginOut()
    {
        this.$store.dispatch('LogOut');
    },
    getUserById()
    {
      request({
        url: '/api/getUserById/1',
        method: 'get',
        // data: {
        //   username,
        //   password
        // }
        // params:{
        //   id:1
        // }
      })
    },
    varify() {
      let appid = '2066897222'; // 腾讯云控制台中对应这个项目的 appid
      //生成一个滑块验证码对象
      let captcha = new TencentCaptcha(appid, function (res) {
        // 用户滑动结束或者关闭弹窗，腾讯返回的内容
        console.log(res)
        if (res.ret === 0) {
          //成功，传递数据给后台进行验证
          axios.post('接口路径', {
            Ticket: res.ticket,
            CaptchaAppId: res.appid,
            Randstr: res.randstr,
            // 其他参数
          })
              .then(
                  // 后台验证通过，返回用户信息
                  // 前端接收并登陆系统
              )
              .catch(
                  // 验证失败
              )
        } else {
          // 提示用户完成验证
        }
      });
      // 滑块显示
      captcha.show();
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$imageUrl: '../assets/static/img/login_background.png';
body {
  background: url($imageUrl);
  background-size: 100% 100%;
  background-attachment: fixed;
  margin-top: 20px;
}
/*为啥获取不到背景图片*/
</style>



